<template>
    <div>
        <div v-if="!articles">
            <div v-for="i in 5" :key="i">
                <el-skeleton style="--el-skeleton-circle-size: 100px">
                </el-skeleton>
            </div>
        </div>
        <div style="display: inline-block;" v-for="i in articles" :key="i.id">
            <div style="width: 340px;height: 190px;margin-left: 30px;">
                <router-link :to="{ name: 'article', query: { id: i.id } }" class="title">
                    <el-image :src="i.face" fit="cover" style="height: 100%;width: 100%;">
                        <template #placeholder>
                            <el-image src="https://www.sucaijishi.com/uploadfile/2018/0919/20180919030733948.gif" :fit="fit"
                                style="height: 100%;width: 100%;" />
                        </template>
                    </el-image>

                    <div class="title">
                        {{ i.title }}
                    </div>
                </router-link>
            </div>
        </div>

    </div>
</template>

<script>
import { ref } from 'vue';
import $ from 'jquery';
export default {
    name: "photoHomeShowComponents",
    props: {
        title: {
            type: String,
        }
    },
    setup(props) {
        let articles = ref('');
        $.ajax({
            url: "http://124.221.73.180:3001/homeArticle/getShowHomeByTag/",
            type: "post",
            data: {
                tag: props.title,
            },
            success(resp) {
                articles.value = resp.article;
            }
        })
        return {
            articles,
        }
    }
}
</script>

<style scoped>
.title {
    text-decoration: none;
    color: black;
    position: relative;
    top: -6px;
    background-color: rgb(238, 238, 238);
    text-align: center;
    white-space: nowrap;
    /* 禁止换行 */
    overflow: hidden;
    /* 隐藏超出部分 */
    text-overflow: ellipsis;
    /* 显示省略号 */
}

.title :visited {
    text-decoration: none;
    color: black;
}

.title :hover {
    text-decoration: none;
    color: red;
}
</style>